import React from 'react';
import { Popover } from 'antd';
import { SketchPicker } from 'react-color';
import cls from 'classnames';
import './styles.less';

export const ColorPicker: React.FC<any> = (props) => {
    const onColorChange = ({ rgb }: any) => {
        let rgbColor = `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`;
        props?.onChange(rgbColor);
    };

    return (
        <Popover
            trigger={'click'}
            autoAdjustOverflow
            overlayInnerStyle={{ padding: 0 }}
            placement="leftTop"
            content={<SketchPicker onChange={onColorChange} color={props?.value} />}
        >
            <div className={cls('design-collapse-color')}>
                <div
                    style={{
                        width: '100%',
                        height: '100%',
                        background: props?.value ?? '#fff',
                    }}
                >
                    
                </div>
            </div>
        </Popover>
    );
};
